<template>
  <el-input v-model="keywords">
    <template slot="prepend" class="input-with-select">
      <el-cascader
        v-model="nation"
        :options="_nationList"
        :style="{width: '100%'}"
      ></el-cascader>
    </template>
    <template slot="append">
      <el-button @click="search">
        立即搜索
      </el-button>
    </template>
  </el-input>
</template>
<style scoped>
.el-input::v-deep .el-input-group__prepend {
  padding: 0;
  width: 200px;
  border:unset;
}

.el-cascader::v-deep .e-input{
  margin-top:-1px;
}

/* .el-input::v-deep .el-input-group__prepend >div.el-cascader.el-cascader--medium.el-cascader >div.el-input.el-input--medium.el-input--suffix > .el-input__inner{ */
  /* border-right: unset; */
/* } */

</style>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'

@Component
export default class Btn extends Vue {
  @Prop() private nationList!: any[]
  @Prop() private initKeywords!: string
  @Prop() private initNation!: string[]

  private nation : string[] = []

  get _nationList(): any {
    return this.nationList
  }

  private keywords = ''
  @Watch('initKeywords')
  watchInitKeywords(val: string) {
    this.keywords = val
  }

  @Watch('initNation')
  watchInitNation(val: string[]) {
    this.nation = val
  }

  search() {
    if (this.nation.length === 0) {
      this.$message.error('请选择国家')
      return
    }
    if (this.keywords.length === 0) {
      this.$message.error('请输入关键词')
      return
    }
    this.$emit('search', this.nation, this.keywords)
  }
}
</script>

<style scoped>

</style>
